<template>
    <div>
        <nav-bar>
            <template v-slot:left></template>
            <template v-slot:default>分类</template>
            <template v-slot:right></template>
        </nav-bar>

        <div id="mainbox">

          <div class="toptab">
            <div class="ordertab">
              <van-tabs v-model:active="active2" @click="tabClick">
                <van-tab  title="销量"></van-tab>
                <van-tab title="价格"></van-tab>
                <van-tab title="评论"></van-tab>
              </van-tabs>
            </div>
            
          </div>

          <van-sidebar v-model="active" class="leftmenu">
            <van-collapse v-model="activeName" accordion>
              <van-collapse-item v-for="item in categories" :title="item.name" :key="item.id" :name="item.name">
                <van-sidebar-item v-for="sub in item.children" :title="sub.name" :key="sub.id" @click="getGoods(sub.id)"/>
              </van-collapse-item>
            </van-collapse>
          </van-sidebar>
        

          <div class="goodslist">
            <div class="content">
              <van-card
                v-for="item in showGoods" key="item.id"
                @click="itemClick(item.id)"
                :num="item.comments_count"
                :price="item.price"
                :desc="item.updated_at"
                :title="item.title"
                :thumb="item.cover_url"
                />
            </div>
          </div>

        </div>

    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar';
import { ref, onMounted, reactive,computed,watchEffect,nextTick } from 'vue';
import {useRouter} from 'vue-router';
import {getCategory, getGoryGoods} from 'network/goods';
import BScroll from 'better-scroll';
import { Toast } from 'vant';
export default {
  name:"Cate",
    components:{
        NavBar
    },
  setup() {
    const router = useRouter();
    const active = ref(0);
    const active2 = ref(0);
    let categories = ref([]);
    const activeName = ref('1');
    let activeKey = ref(0);


    //当前的排序条件
    let currentOrder = ref('sales');
    //当前的分类ID
    let currentCid = ref('0');

    //数据模型
    const goods = reactive({
      sales:{page:1, list:[]},
      price:{page:1, list:[]},
      comments_count:{page:1, list:[]}
    })
    //计算属性取得显示商品
    const showGoods = computed(()=>{
      return goods[currentOrder.value].list;;
    })
    //init方法加上数据
    const init =() =>{
      Toast.loading({message:'加载中...',forbidClick:true});
      getGoryGoods('sales',currentCid.value).then(res=>{
        console.log(res);
        goods.sales.list = res.goods.data;
        Toast.clear();
      })

      getGoryGoods('price',currentCid.value).then(res=>{
        goods.price.list = res.goods.data;
        
      })

      getGoryGoods('comments_count',currentCid.value).then(res=>{
        goods.comments_count.list = res.goods.data;
      })

    }
    
    let bscroll = reactive({}); //bscroll声明 
    onMounted(()=>{
      getCategory().then(res=>{
        // console.log(res);
        categories.value = res.categories;
      });

      //初始化
      // getGoryGoods(currentOrder.value,currentCid.value).then(res=>{
      //   goods[currentOrder.value].list = res.goods.data;
      //   console.log(res.goods.data);
      // });
      init();

      //创建BetterScroll对象
      bscroll = new BScroll(document.querySelector('.goodslist'),{

          probeType:3,  //0,1,2,3只要在支行就触发scroll事件
          click:true,  //是否允许点击
          pullUpLoad:true  //上拉加载更多 默认是false
      });

      //上拉加载数据，触发pullingUp
      bscroll.on('pullingUp',()=>{
          console.log('上拉加载更多...');

          const page = goods[currentOrder.value].page + 1;

          Toast.loading({message:'上拉加载中...',forbidClick:true});

          getGoryGoods(currentOrder.value,currentCid.value).then(res=>{
            goods[currentOrder.value].list.push(...res.goods.data);
            goods[currentOrder.value].page +=1;
             Toast.clear();
          })
         
          //完成上拉，等数据请示完成，要将新数据展示出来
          bscroll.finishPullUp();

          nextTick(()=>{
            
            bscroll && bscroll.refresh();
            
          })
          
          console.log("contentheight:"+document.querySelector('.content').clientHeight);
          console.log("当前类型:"+currentOrder.value+",当前页："+page);


      })

    })
   
    //排序选项卡
    const tabClick =(index)=>{

      let orders =['sales','price','comments_count'];
      currentOrder.value = orders[index];

      getGoryGoods(currentOrder.value,currentCid.value).then(res=>{
        
        goods[currentOrder.value].list = res.goods.data;

        nextTick(()=>{
          bscroll && bscroll.refresh();
        })
       
      })
      
      console.log('当前分类id:'+currentCid.value);
      console.log('排序的序号'+currentOrder.value);
    }


    //通过分类ID得到商品列表
    const getGoods = (cid) =>{
      currentCid.value = cid;
      
      
      getGoryGoods(currentOrder.value,currentCid.value).then(res=>{
        goods[currentOrder.value].list = res.recommend_goods;
        // goods[currentOrder.value].list = res.goods.data;   应该是这样，调不出数据，接口改了
        console.log(res);
      });



      console.log('当前分类id:'+currentCid.value);
      console.log('排序的序号'+currentOrder.value);
    }

    let itemClick=(id)=>{
      router.push({path:"/detail",query:{id}});
    }

    //监听任何一个变量有变化
    watchEffect(()=>{
      nextTick(()=>{
        bscroll && bscroll.refresh();
      })
    })

    return { 
      active,
      active2,
      activeKey,
      activeName,
      categories,
      tabClick,
      getGoods,
      itemClick,
      currentOrder,
      currentCid,
      goods,
      showGoods,
      bscroll
    };
  },
}
</script>

<style scoped lang="scss">
#mainbox{
  margin-top: 45px;
  display: flex;
  .toptab{
    flex:1;
    z-index: 9999 ;
    height: 50px;
    position: fixed;
    top:45px;
    right:0;
    left:130px;
  }
  .leftmenu{
    position: fixed;
    top:95px;
    left:0;
    width: 130px;
  }
  .goodslist{
    flex:1;
    height: 100vh;
    position:fixed;
    top:95px;
    left:130px;
    right: 0;
    padding:10px;
    .content:{
      padding-top: 100px;
    }
  }
}
.van-image{
  width: 100% !important;
  height: 100% !important;
}
</style>



<style lang="scss">
.van-tabs__line {
  background-color: var(--color-tint) !important;
}
.van-tabs__wrap{
  position:sticky;
  top:45px !important;
  z-index: 999;
}

</style>